<template>
  <div>
    <div class="dfgwe">
      <vue-seamless-scroll :data="posdata" class="warpgg" :class-option="defaultOption">
        <!-- 循环渲染每条数据 -->
        <div v-for="(item, index) in posdata" :key="index" class="ggff">
          <div class="h">
            <span>车辆名称：</span>
            <span class="stuas">{{ item.name }}</span>
          </div>
          <div class="h">
            <span>当前车辆状态：</span>
            <span class="stuas">{{ item.state }}</span>
          </div>

          <div class="h">
            <span>是否异常振动-被盗的振动监测：</span>
            <span class="huangs">{{ item.abnormalFluctuations }}</span>
          </div>

          <div class="h">
            <span>是否故障：</span>
            <span :class="[item.fault == '正常' ? 'zhengchgahgt' : 'guzhang']">{{ item.fault }}</span>
          </div>
          <div class="h">
            <span>定位时间：</span>
            <span>{{ item.createDate }}</span>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      posdata: [
        {
          name: "车辆00A",
          state: "极佳",
          abnormalFluctuations: "暂无波动，没有被盗",
          fault: "正常",
          createDate: "2025-06-18 14:32:17"
        },
        {
          name: "车辆00B",
          state: "良好",
          abnormalFluctuations: "有波动",
          fault: "警告",
          createDate: "2025-06-19 08:12:45"
        },
        {
          name: "车辆00C",
          state: "较差",
          abnormalFluctuations: "波动较大",
          fault: "故障",
          createDate: "2025-06-17 20:01:33"
        },
        {
          name: "车辆00D",
          state: "一般",
          abnormalFluctuations: "暂无波动，没有被盗",
          fault: "正常",
          createDate: "2025-06-20 02:44:59"
        },
        {
          name: "车辆00E",
          state: "极佳",
          abnormalFluctuations: "有波动",
          fault: "正常",
          createDate: "2025-06-16 11:23:10"
        },
        {
          name: "车辆00F",
          state: "良好",
          abnormalFluctuations: "波动较大",
          fault: "故障",
          createDate: "2025-06-15 09:10:22"
        },
        {
          name: "车辆00G",
          state: "较差",
          abnormalFluctuations: "暂无波动，没有被盗",
          fault: "正常",
          createDate: "2025-06-14 18:45:30"
        },
        {
          name: "车辆00H",
          state: "一般",
          abnormalFluctuations: "有波动",
          fault: "警告",
          createDate: "2025-06-13 12:00:45"
        },
        {
          name: "车辆00I",
          state: "极佳",
          abnormalFluctuations: "波动较大",
          fault: "故障",
          createDate: "2025-06-12 07:30:11"
        },
        {
          name: "车辆00J",
          state: "良好",
          abnormalFluctuations: "暂无波动，没有被盗",
          fault: "正常",
          createDate: "2025-06-11 15:22:03"
        },
        {
          name: "车辆00K",
          state: "较差",
          abnormalFluctuations: "有波动",
          fault: "警告",
          createDate: "2025-06-10 09:44:22"
        },
        {
          name: "车辆00L",
          state: "一般",
          abnormalFluctuations: "波动较大",
          fault: "故障",
          createDate: "2025-06-09 16:15:34"
        },
        {
          name: "车辆00M",
          state: "极佳",
          abnormalFluctuations: "暂无波动，没有被盗",
          fault: "正常",
          createDate: "2025-06-08 04:03:55"
        },
        {
          name: "车辆00N",
          state: "良好",
          abnormalFluctuations: "有波动",
          fault: "警告",
          createDate: "2025-06-07 19:21:10"
        },
        {
          name: "车辆00O",
          state: "较差",
          abnormalFluctuations: "波动较大",
          fault: "故障",
          createDate: "2025-06-06 13:42:07"
        },
        {
          name: "车辆00P",
          state: "一般",
          abnormalFluctuations: "暂无波动，没有被盗",
          fault: "正常",
          createDate: "2025-06-05 08:33:12"
        },
        {
          name: "车辆00Q",
          state: "极佳",
          abnormalFluctuations: "有波动",
          fault: "警告",
          createDate: "2025-06-04 22:14:55"
        },
        {
          name: "车辆00R",
          state: "良好",
          abnormalFluctuations: "波动较大",
          fault: "故障",
          createDate: "2025-06-03 17:09:33"
        },
        {
          name: "车辆00S",
          state: "较差",
          abnormalFluctuations: "暂无波动，没有被盗",
          fault: "正常",
          createDate: "2025-06-02 11:25:44"
        },
        {
          name: "车辆00T",
          state: "一般",
          abnormalFluctuations: "有波动",
          fault: "警告",
          createDate: "2025-06-01 06:10:22"
        },
        {
          name: "车辆00U",
          state: "极佳",
          abnormalFluctuations: "波动较大",
          fault: "故障",
          createDate: "2025-05-31 14:32:17"
        },
        {
          name: "车辆00V",
          state: "良好",
          abnormalFluctuations: "暂无波动，没有被盗",
          fault: "正常",
          createDate: "2025-05-30 08:12:45"
        },
        {
          name: "车辆00W",
          state: "较差",
          abnormalFluctuations: "有波动",
          fault: "警告",
          createDate: "2025-05-29 20:01:33"
        },
        {
          name: "车辆00X",
          state: "一般",
          abnormalFluctuations: "波动较大",
          fault: "故障",
          createDate: "2025-05-28 02:44:59"
        },
        {
          name: "车辆00Y",
          state: "极佳",
          abnormalFluctuations: "暂无波动，没有被盗",
          fault: "正常",
          createDate: "2025-05-27 11:23:10"
        },
        {
          name: "车辆00Z",
          state: "良好",
          abnormalFluctuations: "有波动",
          fault: "警告",
          createDate: "2025-05-26 09:10:22"
        },
        {
          name: "车辆01A",
          state: "较差",
          abnormalFluctuations: "波动较大",
          fault: "故障",
          createDate: "2025-05-25 18:45:30"
        },
        {
          name: "车辆01B",
          state: "一般",
          abnormalFluctuations: "暂无波动，没有被盗",
          fault: "正常",
          createDate: "2025-05-24 12:00:45"
        },
        {
          name: "车辆01C",
          state: "极佳",
          abnormalFluctuations: "有波动",
          fault: "警告",
          createDate: "2025-05-23 07:30:11"
        },
        {
          name: "车辆01D",
          state: "良好",
          abnormalFluctuations: "波动较大",
          fault: "故障",
          createDate: "2025-05-22 15:22:03"
        },
        {
          name: "车辆01E",
          state: "较差",
          abnormalFluctuations: "暂无波动，没有被盗",
          fault: "正常",
          createDate: "2025-05-21 09:44:22"
        },
        {
          name: "车辆01F",
          state: "一般",
          abnormalFluctuations: "有波动",
          fault: "警告",
          createDate: "2025-05-20 16:15:34"
        },
        {
          name: "车辆01G",
          state: "极佳",
          abnormalFluctuations: "波动较大",
          fault: "故障",
          createDate: "2025-05-19 04:03:55"
        },
        {
          name: "车辆01H",
          state: "良好",
          abnormalFluctuations: "暂无波动，没有被盗",
          fault: "正常",
          createDate: "2025-05-18 19:21:10"
        },
        {
          name: "车辆01I",
          state: "较差",
          abnormalFluctuations: "有波动",
          fault: "警告",
          createDate: "2025-05-17 13:42:07"
        },
        {
          name: "车辆01J",
          state: "一般",
          abnormalFluctuations: "波动较大",
          fault: "故障",
          createDate: "2025-05-16 08:33:12"
        },
        {
          name: "车辆01K",
          state: "极佳",
          abnormalFluctuations: "暂无波动，没有被盗",
          fault: "正常",
          createDate: "2025-05-15 22:14:55"
        },
        {
          name: "车辆01L",
          state: "良好",
          abnormalFluctuations: "有波动",
          fault: "警告",
          createDate: "2025-05-14 17:09:33"
        },
        {
          name: "车辆01M",
          state: "较差",
          abnormalFluctuations: "波动较大",
          fault: "故障",
          createDate: "2025-05-13 11:25:44"
        },
        {
          name: "车辆01N",
          state: "一般",
          abnormalFluctuations: "暂无波动，没有被盗",
          fault: "正常",
          createDate: "2025-05-12 06:10:22"
        },
        {
          name: "车辆01O",
          state: "极佳",
          abnormalFluctuations: "有波动",
          fault: "警告",
          createDate: "2025-05-11 14:32:17"
        },
        {
          name: "车辆01P",
          state: "良好",
          abnormalFluctuations: "波动较大",
          fault: "故障",
          createDate: "2025-05-10 08:12:45"
        },
        {
          name: "车辆01Q",
          state: "较差",
          abnormalFluctuations: "暂无波动，没有被盗",
          fault: "正常",
          createDate: "2025-05-09 20:01:33"
        },
        {
          name: "车辆01R",
          state: "一般",
          abnormalFluctuations: "有波动",
          fault: "警告",
          createDate: "2025-05-08 02:44:59"
        },
        {
          name: "车辆01S",
          state: "极佳",
          abnormalFluctuations: "波动较大",
          fault: "故障",
          createDate: "2025-05-07 11:23:10"
        },
        {
          name: "车辆01T",
          state: "良好",
          abnormalFluctuations: "暂无波动，没有被盗",
          fault: "正常",
          createDate: "2025-05-06 09:10:22"
        },
        {
          name: "车辆01U",
          state: "较差",
          abnormalFluctuations: "有波动",
          fault: "警告",
          createDate: "2025-05-05 18:45:30"
        },
        {
          name: "车辆01V",
          state: "一般",
          abnormalFluctuations: "波动较大",
          fault: "故障",
          createDate: "2025-05-04 12:00:45"
        },
        {
          name: "车辆01W",
          state: "极佳",
          abnormalFluctuations: "暂无波动，没有被盗",
          fault: "正常",
          createDate: "2025-05-03 07:30:11"
        },
        {
          name: "车辆01X",
          state: "良好",
          abnormalFluctuations: "有波动",
          fault: "警告",
          createDate: "2025-05-02 15:22:03"
        },
        {
          name: "车辆01Y",
          state: "较差",
          abnormalFluctuations: "波动较大",
          fault: "故障",
          createDate: "2025-05-01 09:44:22"
        }
      ]
    };
  },
  computed: {
    defaultOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: this.posdata.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  }
};
</script>

<style>
* {
  list-style-type: none;
}
 .dfgwe{
  position: relative;
  width: 420px !important;
}
.dfgwe .ggff {
  width: 100%;
  height: 150px;
  display: inline-block;
  /* background-color: chartreuse; */
  /* 设置下边框 */
  /* 清除所有边框 */
  border: none;
  /* 仅设置下边框 */
  border-bottom: 2px solid transparent; /* 注意这里的transparent */
  /* 指定边框图像源 */
  border-image-source: url("../../../assets/img/zuo_xuxian.png");
  /* 调整此值以适应您的图片，可能需要根据实际图片调整 */
  border-image-slice: 30;
  /* 设置边框图像宽度与下边框宽度一致 */
  /* border-image-width: 10px; */
  /* 确保边框图像仅应用于下边框 */
  border-image-repeat: stretch; /* 根据需要选择 stretch, round 或 repeat */
}

.dfgwe .ggff:first-child {
  /* 仅设置下边框 */
  border-top: 2px solid transparent; /* 注意这里的transparent */
  /* 指定边框图像源 */
  border-image-source: url("../../../assets/img/zuo_xuxian.png");
  /* 调整此值以适应您的图片，可能需要根据实际图片调整 */
  border-image-slice: 30;
  /* 设置边框图像宽度与下边框宽度一致 */
  /* border-image-width: 10px; */
  /* 确保边框图像仅应用于下边框 */
  border-image-repeat: stretch; /* 根据需要选择 stretch, round 或 repeat */
}
.h {
  margin-top: 4px;
}
.h span:nth-child(1) {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
}
.h span:nth-child(2) {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
}
.stuas {
  color: #1890ff !important;
  font-size: 18px !important;
}


.warpgg {
    height: 450px;
    /* 设置滚动区域的高度 */
    overflow: hidden;
    /* 隐藏超出部分 */
    /* border: 1px solid #ccc; 可选：添加边框 */
}

.zhengchgahgt {
  color: #29fc29 !important;
}
.guzhang {
  color: #fc1a1a !important;
}
.huangs {
    color: #e6a23c !important;
}
</style>